﻿// 百度地图API功能
var map = new BMap.Map("container");
var pt = new BMap.Point('123.8', '38.7');
map.centerAndZoom(pt, 5);
//创建小狐狸

var styleCircleF = {
    strokeColor: "red",    //边线颜色。  
    fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。  
    strokeWeight: 1,       //边线的宽度，以像素为单位。  
    strokeOpacity: 1,    //边线透明度，取值范围0 - 1。  
    fillOpacity: 0.3,      //填充的透明度，取值范围0 - 1。  
    strokeStyle: 'dashed' //边线的样式，solid或dashed。  
};
//画圆
var circleF = new BMap.Circle(pt, '0', styleCircleF);

var circleS = new BMap.Circle(pt, '0', { strokeColor: "black", strokeWeight: 1, strokeOpacity: 1 });
circleS.setStrokeStyle("dashed");


var myIcon = new BMap.Icon("1.gif", new BMap.Size(41, 41));
var marker2 = new BMap.Marker(pt, { icon: myIcon });  // 创建标注
map.addOverlay(marker2);              // 将标注添加到地图中

//    让小狐狸说话（创建信息窗口）
var infoWindow2 = new BMap.InfoWindow("<p style='font-size:14px;'><span style='color:blue'>201410麦德姆(MATMO)</span><br/>时&nbsp&nbsp&nbsp&nbsp间:&nbsp2014年07月25日22时<br/>强&nbsp&nbsp&nbsp&nbsp度: 热带风暴<br/>中心位置: 123.8°E,38.7°N<br>风力风速: 8级 18.0米/秒<br/>中心气压: 995.0百帕<br/>移速移向: <br/>风圈半径: 公里(7级风圈)</p>");
marker2.addEventListener("click", function () { this.openInfoWindow(infoWindow2); });
marker2.openInfoWindow(infoWindow2);
map.enableScrollWheelZoom();
var polylinePointsArray = [];
var rx = document.getElementById("dp_x");
var ry = document.getElementById("dp_y");
var a = '109';
for (var i = 0; i < a; i++) {
    var x = rx.options[i].value;
    var y = ry.options[i].value;
    polylinePointsArray[i] = new BMap.Point(x, y);
}

var pp = [new BMap.Point(116.432045, 39.910683), new BMap.Point(120.129721, 30.314429), new BMap.Point(121.491121, 25.127053)];
var curve = new BMap.Polyline(polylinePointsArray, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建线对象

//循环自定义覆盖物
for (var i = 1; i < a; i++) {
    var x = rx.options[i].innerText;
    var y = ry.options[i].innerText;
    // 复杂的自定义覆盖物
    function ComplexCustomOverlay(point, leng, cl) {
        this._point = point;
        this._leng = leng;
        this._cl = cl;
    }
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    ComplexCustomOverlay.prototype.initialize = function (mpp) {
        this._mpp = mpp;
        var div = this._div = document.createElement("div");
        div.style.position = "absolute";
        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
        div.style.backgroundColor = this._cl;
        div.style.height = this._leng;
        div.style.width = this._leng;

        map.getPanes().labelPane.appendChild(div);

        return div;
    }
    ComplexCustomOverlay.prototype.draw = function () {
        var mpp = this._mpp;
        var pixel = map.pointToOverlayPixel(this._point);
        this._div.style.left = pixel.x - this._leng / 2 + "px";
        this._div.style.top = pixel.y - this._leng / 2 + "px";
    }
    var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(x, y), 5, "green");
    map.addOverlay(myCompOverlay);


}
var poly2 = [];
var rx2 = document.getElementById("dp_x2");
var ry2 = document.getElementById("dp_y2");
var h = '4';
for (var i = 0; i < h; i++) {
    var x2 = rx2.options[i].value;
    var y2 = ry2.options[i].value;
    poly2[i] = new BMap.Point(x2, y2);

}
var curve2 = new BMap.Polyline(poly2, { strokeColor: "red", strokeWeight: 1, strokeOpacity: 0.5 }); //创建线对象
curve2.setStrokeStyle("dashed");

var myIcon1 = new BMap.Icon("images/dian.png", new BMap.Size(12, 12));
var infoWindow3 = [];

infoWindow3[0] = new BMap.InfoWindow("<p style='font-size:14px;'><span style='color:blue'>201410麦德姆(MATMO)</span><br/>预报机构: 中央气象台<br/>到达时间:&nbsp2014年07月26日02时<br/>强&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp度: 热带风暴<br/>中心位置: 124.6°E,39.0°N<br>最大风力: 8级<br/>最大风速: 18.0米/秒<br/>中心气压: 995.0百帕<br/>移速速度: <br/>移动方向:<br/>七级风圈半径: 公里<br/>十级风圈半径: 公里</p>");

infoWindow3[1] = new BMap.InfoWindow("<p style='font-size:14px;'><span style='color:blue'>201410麦德姆(MATMO)</span><br/>预报机构: 中央气象台<br/>到达时间:&nbsp2014年07月26日08时<br/>强&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp度: 热带风暴<br/>中心位置: 125.9°E,39.7°N<br>最大风力: 8级<br/>最大风速: 18.0米/秒<br/>中心气压: 995.0百帕<br/>移速速度: <br/>移动方向:<br/>七级风圈半径: 公里<br/>十级风圈半径: 公里</p>");

infoWindow3[2] = new BMap.InfoWindow("<p style='font-size:14px;'><span style='color:blue'>201410麦德姆(MATMO)</span><br/>预报机构: 中央气象台<br/>到达时间:&nbsp2014年07月26日14时<br/>强&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp度: 热带低压<br/>中心位置: 127.6°E,40.1°N<br>最大风力: 7级<br/>最大风速: 16.0米/秒<br/>中心气压: 998.0百帕<br/>移速速度: <br/>移动方向:<br/>七级风圈半径: 公里<br/>十级风圈半径: 公里</p>");

//循环自定义覆盖物
for (var i = 1; i < h; i++) {
    var x = rx2.options[i].innerText;
    var y = ry2.options[i].innerText;

    var marker3 = new BMap.Marker(new BMap.Point(x, y), { icon: myIcon1 });  // 创建标注
    var v = i - 1;
    if (v == 0) {
        marker3.addEventListener("click", function () { this.openInfoWindow(infoWindow3[0]) });
    } else if (v == 1) {
        marker3.addEventListener("click", function () { this.openInfoWindow(infoWindow3[1]) });
    } else if (v == 2) {
        marker3.addEventListener("click", function () { this.openInfoWindow(infoWindow3[2]) });
    } else if (v == 3) {
        marker3.addEventListener("click", function () { this.openInfoWindow(infoWindow3[3]) });
    } else if (v == 4) {
        marker3.addEventListener("click", function () { this.openInfoWindow(infoWindow3[4]) });
    } else if (v == 5) {
        marker3.addEventListener("click", function () { this.openInfoWindow(infoWindow3[5]) });
    } else if (v == 6) {
        marker3.addEventListener("click", function () { this.openInfoWindow(infoWindow3[6]) });
    } else if (v == 7) {
        marker3.addEventListener("click", function () { this.openInfoWindow(infoWindow3[7]) });
    } else if (v == 8) {
        marker3.addEventListener("click", function () { this.openInfoWindow(infoWindow3[8]) });
    } else if (v == 9) {
        marker3.addEventListener("click", function () { this.openInfoWindow(infoWindow3[9]) });
    } else if (v == 10) {
        marker3.addEventListener("click", function () { this.openInfoWindow(infoWindow3[10]) });
    } else if (v == 11) {
        marker3.addEventListener("click", function () { this.openInfoWindow(infoWindow3[11]) });
    }
    map.addOverlay(marker3);
}

map.addOverlay(curve); //添加到地图中
map.addOverlay(curve2); //添加到地图中 
map.addOverlay(circleS);
map.addOverlay(circleF);

map.addControl(new BMap.NavigationControl());
